<template>
  <u-popup
    class="image-code-pop"
    :value="show"
    mode="center"
    border-radius="10"
    width="602rpx"
    height="404rpx"
    @close="close"
  >
    <view class="pop-box fdc flex-between u-p-t-40 u-p-b-50 u-p-l-40 u-p-r-40">
      <view class="font-32 lh-44 font-weight-500">请在下方输入验证码</view>
      <view class="cell flex-between">
        <input type="text" v-model="imgcode" maxlength="4" placeholder="请输入" />
        <image class="img-code" @click.stop="$emit('change')" :src="img_url" mode=""></image>
      </view>
      <view class="btn confirm-btn u-text-center font-32" @tap="$u.debounce(confirm, 2000, true)"
        >确认
      </view>
    </view>
  </u-popup>
</template>

<script>
  import mixin from '@/mixin/captcha'
  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      img_url: {
        type: String,
        default: '',
      },
    },
    mixins: [mixin],
    data() {
      return {
        imgcode: '',
      }
    },
    methods: {
      open() {
        this.$emit('update:show', true)
        this.imgcode = ''
      },
      close() {
        this.$emit('update:show', false)
        this.imgcode = ''
      },
      // 点击确认按钮
      confirm() {
        if (this.imgcode.length > 3) {
          this.$emit('confirm', this.imgcode)
          this.close()
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .image-code-pop {
    .pop-box {
      width: 602rpx;
      height: 404rpx;
    }

    .btn {
      width: 100%;
      height: 92rpx;
      line-height: 92rpx;
      border-radius: 46rpx;
    }

    .cell {
      display: flex;
      height: 100rpx;
      padding: 28rpx 0;
      background-color: #fff;
      flex-direction: row;
      align-items: center;

      input {
        width: 300rpx;
        height: 100rpx;
        padding-left: 40rpx;
        margin-right: 20rpx;
        border: 2rpx solid #e1e1e1;
        border-radius: 8rpx;
      }

      .img-code {
        width: 178rpx;
        height: 100rpx;
      }
    }

    .cancel-btn {
      border: 2rpx solid rgba(51, 51, 51, 1);
    }

    .confirm-btn {
      color: #fff;
      background: var(--color);
    }
  }
</style>
